import React, { Component } from 'react';
import banner from '../../../img1/homebanner.png'
import topimg from '../../../img1/home1.png'
import ppimg from '../../../img1/home2.png'
import ppimgs from '../../../img1/home-22.png'
import carimg from '../../../img1/home-42.png'
import heng from '../../../img1/home-73.png'
import carimgs from '../../../img4/car.png'
import './home.scss'
import { Carousel } from 'antd';
import { CarFilled,UpOutlined,EditOutlined,FrownOutlined } from '@ant-design/icons';
import $ from 'jquery'
import { Link } from 'react-router-dom';
import Foot from '../../components3/foot/foot'
import Nav from '../nav/nav.jsx'
class home extends Component {
    constructor(props){
        super(props)
        this.state={
            arr:[1,1,1,1,1,1],
            arr1:[1,1,1,1,1,1,1,1,1],
            lunbo:[]
        }
    }
    
    componentDidMount() {
        $('.small-nav .item').mouseenter(function () {
            var index = $(this).index();
            console.log(index)
            $('.curr').css({ left: (120 * index) + 'px' })
        })
        $(document).scroll(function() {
            var scroH = $(document).scrollTop();  //滚动高度
            if(scroH>=1379){
                $('.cebian').fadeIn(1000);
            }else{
                $('.cebian').fadeOut(1000);
            }
        })
    }
    scrollToAnchor (id){
        document.getElementById(id).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
    }
    render() {
        return (
            <div className="zheshishouye" id="top">
                <Nav  history={this.props.history}/>
                <Carousel autoplay className="jingtou">
                    <div><img src={banner} alt="" /></div>
                    <div><img src={banner} alt="" /></div>
                    <div><img src={banner} alt="" /></div>
                    <div><img src={banner} alt="" /></div>
                </Carousel>
                <div className="zheshishouye-topimg container">
                    <img src={topimg} alt="" />
                    <img src={topimg} alt="" />
                    <img src={topimg} alt="" />
                    <img src={topimg} alt="" />
                </div>
                <div className="zheshishouye-jingxuanpp container">
                    <div className="jxpp-top">
                        <h3><span>精选</span><span>品牌</span></h3>
                        <span>Brand selection</span>
                    </div>
                    <div className="jxpp-content">
                        <img src={ppimg} alt="" />
                        <div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                            <div className="ppimglist"><img src={ppimgs} alt="" /></div>
                        </div>
                    </div>
                </div>
                {this.state.arr1.map((v,i)=>{
                    return(<div key={i} id={'sub'+i} className="zheshishouye-list container">
                    <div className="zheshishouye-list-title">
                        <div>
                            <h1>
                                <CarFilled />&nbsp;&nbsp;&nbsp;&nbsp;汽车装饰</h1>
                            <ul class="small-nav">
                                <li class="item">爆款推荐</li>
                                <li class="item">精品女装</li>
                                <li class="item">精品男装</li>
                                <li class="curr"></li>
                            </ul>
                        </div>
                    </div>
                    <div className="zheshishouye-list-content">
                        <img src={carimg} alt="" />

                        <div className="jingpu1">
                            <div className="jingpubu1">{this.state.arr.map((item, index) => {
                                return (
                                    <div className="jingliu1" key={index}>
                                        <div className="car">
                                            <img src={carimgs} alt="" />

                                            <div className="jingtit">
                                                <p>同城汽车装饰中心</p>
                                            </div>
                                        </div>
                                        <div className="jingicon">
                                            <p>李杰0</p>
                                        </div>
                                        <div className="jingphone">
                                            <p>19837643122</p>
                                        </div>
                                        <div className="jinglocat">
                                            <p>浙江省台州市温岭市人民西路281号</p>
                                        </div>
                                    </div>
                                )
                            })

                            } </div>
                            </div>
                        </div>
                    <div className="bigimg container"> <img src={heng} alt=""/></div> 
                </div>)
                })}
                
            {/* 楼层 */}
            <div className="cebian">
                <ul>
                        <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('sub0')}>
                        <span>1&nbsp;&nbsp;F</span>
                        餐饮
                    </Link >
                </li>
                        <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('sub1')}>
                        <span>2&nbsp;&nbsp;F</span>
                        服饰
                    </Link >
                </li>
                        <li>
                    <Link to="###" onClick={this.scrollToAnchor.bind(this,'sub2')}>
                        <span>3&nbsp;&nbsp;F</span>
                        娱乐
                    </Link >
                </li>
                        <li>
                    <Link onClick={()=>this.scrollToAnchor('sub3')}>
                        <span>4&nbsp;&nbsp;F</span>
                        家具
                    </Link >
                </li>
                        <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('sub4')}>
                        <span>5&nbsp;&nbsp;F</span>
                        零售
                    </Link >
                </li>
                        <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('sub5')}>
                        <span>6&nbsp;&nbsp;F</span>
                        日化
                    </Link >
                </li>
                        <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('sub6')}>
                        <span>7&nbsp;&nbsp;F</span>
                        数码家电
                    </Link >
                </li>
                        <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('sub7')}>
                        <span>8&nbsp;&nbsp;F</span>
                        建材
                    </Link >
                </li>
                        <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('sub8')}>
                        <span>9&nbsp;&nbsp;F</span>
                        酒店
                    </Link >
                </li>
                <li>
                    <Link to="###" onClick={()=>this.scrollToAnchor('top')}>
                    <UpOutlined />
                    <span>顶部</span>
                    </Link >
                </li>
                 </ul>
            </div>
            <Foot/>
            </div>
        );
    }
}

export default home;